<template>
	<!-- 评论管理 -->
	<div id="tops">
		<div class="Box">
			<el-scrollbar>
				<div class="filter-container">
					<div class="filter-item" :model="formInline">
						<el-input v-model="formInline.id" placeholder="评论ID" clearable></el-input>
						<el-input v-model="formInline.title" placeholder="用户姓名" clearable></el-input>
						<el-input v-model="formInline.suptitle" placeholder="商品名称" clearable></el-input>
						<el-input v-model="formInline.content" placeholder="评论内容" clearable></el-input>
					</div>
					<el-button type="primary" @click="liste" icon="el-icon-search" v-insert="['operation:appraise:query']">查找</el-button>
				</div>
				<div>
					<el-table :data="tableData" border style="width: 100%" empty-text="暂无数据" size="mini" v-loading="loading"
					 element-loading-text="正在查询中。。。">
						<el-table-column prop="id" label="评论ID " align="center">
						</el-table-column>
						<el-table-column prop="content" label="评论内容" align="center">
						</el-table-column>
						<el-table-column prop="fullName" label="评论分数 " align="center">
						</el-table-column>
						<el-table-column prop="parent" label="用户ID" align="center">
						</el-table-column>
						<el-table-column prop="level" label="用户昵称" align="center">
						</el-table-column>
						<el-table-column prop="imgUrl" label="订单ID" align="center">
						</el-table-column>
						<el-table-column prop="picUrl" label="商品编号" align="center">
							<template slot-scope="scope">
								<img :src="scope.row.picUrl">
							</template>
						</el-table-column>
						<el-table-column prop="imgUrl" label="商品名称" align="center">
						</el-table-column>
						<el-table-column prop="imgUrl" label="评论时间" align="center">
							<template slot-scope="scope">
								{{getYMDHMS(scope)}}
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button type="danger" @click="del(scope.row)" size="mini" v-insert="['operation:appraise:delete']">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="block1">
					<span class="demonstration"></span>
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
					 :page-size="count" :total="totalCount" :page-sizes="[10, 20, 30, 40, 50, 100]">
					</el-pagination>
				</div>
			</el-scrollbar>
		</div>
	</div>

</template>

<script>
	import {
		Commelist,
		Commedel
	} from '../../api/commentmanage.js'
	export default {
		data() {
			return {
				input: '',
				tableData: [],
				loading: true,
				count: 20,
				totalCount: 1,
				dialogFormVisible: false,
				title: '',
				pageNo: 1,
				options: [],
				value: '',
				formLabelWidth: '120px',
				formInline: {
					id: null,
					title: null,
					suptitle: null,
					content: null
				}
			}
		},

		methods: {
			// 删除
			del(row) {
				console.log(row)
				this.$confirm(`此操作将永久删除该用户---'${row.content}'---是否继续?', '提示`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						const data = {
							content: row.content,
							id: row.id
						}
						Commedel(data).then((res) => {
							if (res.data.errmsg == '成功') {
								this.liste()
								this.$message({
									type: 'success',
									message: '删除评论成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: res.data.errmsg
								})
							}
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			getYMDHMS(timestamp) {
				if (timestamp) {
					const time = new Date(timestamp)
					const year = time.getFullYear().toString().padStart(2)
					const month = (time.getMonth() + 1).toString().padStart(2)
					const date = time.getDate().toString().padStart(2, '0')
					const hours = time.getHours().toString().padStart(2)
					const minute = time.getMinutes().toString().padStart(2)
					const second = time.getSeconds().toString().padStart(2)
					return (month + '月' + date + '日' + hours + '时' + minute + '分')
				} else {
					return '无'
				}
			},
			liste() {
				const data = {
					pageNo: this.pageNo,
					limit: this.count,
					id: this.formInline.id,
					userName: this.formInline.title,
					spuName: this.formInline.suptitle,
					content: this.formInline.content
				}
				console.log(data)
				Commelist(data).then((response) => {
					console.log(response)
					if (response.data.errmsg == '成功') {
						this.loading = false
						this.tableData = response.data.data.items
						this.totalCount = response.data.data.total
						this.count = response.data.data.pageSize
					} else {
						setTimeout(() => {
							this.loading = false
						}, 5000)
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
				this.count = val
				this.liste()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
				this.pageNo = val
				this.liste()
			}
		},
		created() {
			this.liste()
		}
	}
</script>

<style scoped="scoped" lang="less">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;

	}

	// 头部
	.Box {
		width: 100%;
		overflow: hidden;
		// height: 900px;
	}

	.filter-container {
		width: 100%;
		height: 54px;
		line-height: 60px;
	}

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
		margin-right: 4px;
		float: left;
		margin-left: 20px;
	}

	.el-input {
		width: 200px !important;
		padding-left: 4px !important;
	}

	.on .el-input {
		width: 300px !important;
	}

	.el-table--border,
	.el-table--group {
		font-size: 10px !important;
	}

	.el-pagination {
		padding: 24px 10px !important;
	}

	.avatar-uploader-icon:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}
</style>
